<template>
	<view class="box">
		<view class="meerchant-head">
			<view class="head-a head-ts">恭喜您成功获得</view>
			<view class="head-b head-ts">商家编号：FOTLM00000001</view>
		</view>
		
		<view class="recharge">
			<view class="recharge-box">
				<view class="recharge-concot">
					<view class="recharge-ts">认购充值</view>
					<view class="recharge-tsa">
						<input type="text" v-model="totalPrice" />
						<view>元</view>
					</view>
					<button class="recharge-button" type="default" @click="recharge">确认充值</button>
				</view>
			</view>
		</view>
		
		<view class="transfer">
			<view class="transfer-box border">
				<view class="transfer-nb">{{membeslist.stay_fqt}}</view>
				<view class="transfer-hkb">待分发回馈宝总额</view>
				<view class="inpt-box">
					<view class="inpt-ts">转让账号：</view>
					<input class="inpt-input" type="text" v-model="mobile" />
				</view>
				<view class="inpt-box bottom">
					<view class="inpt-ts">转让数量：</view>
					<input class="inpt-input" type="text" v-model="number" />
				</view>
				<view class="transfer-button">
					<view class="button-ts" @click="zr">确认转让</view>
				</view>
			</view>
			<view class="transfer-box">
				<view class="transfer-nb">{{membeslist.stay_gxz}}</view>
				<view class="transfer-hkb">待分发贡献值总额</view>
				<view class="inpt-box">
					<view class="inpt-ts">转让账号：</view>
					<input class="inpt-input" type="text" v-model="mobiles" />
				</view>
				<view class="inpt-box bottom">
					<view class="inpt-ts">转让数量：</view>
					<input class="inpt-input" type="text" v-model="numbers" />
				</view>
				<view class="transfer-button">
					<view class="button-ts" @click="zrs">确认转让</view>
				</view>
			</view>
		</view>
		
		<view class="coupon-list">
			<tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19"
			 @change="change" itemWidth="50%"></tui-tabs>
			 <view class="coupon-box" v-if="currentTab==0">
				<view class="list">
					 <view class="list-top">
						 <view class="list-top-ts">
							 下单时间：2019-03-12  12:09:33
						 </view>
					 </view>
					 <view class="list-bottom">
						 <view class="bottom-tp">
							 <view class="bottom-tx"></view>
							 <view class="bottom-name">小灵子</view>
						 </view>
						 <view class="bottom-text">
							 <view class="bottom-text-s">转让数量：<text class="text-s">10</text></view>
							 <view class="bottom-text-s">账号：11690131</view>
							 <view class="bottom-text-s">成交量：1</view>
						 </view>
					 </view>
				</view>
				<view class="list">
					 <view class="list-top">
						 <view class="list-top-ts">
							 下单时间：2019-03-12  12:09:33
						 </view>
					 </view>
					 <view class="list-bottom">
						 <view class="bottom-tp">
							 <view class="bottom-tx"></view>
							 <view class="bottom-name">小灵子</view>
						 </view>
						 <view class="bottom-text">
							 <view class="bottom-text-s">转让数量：<text class="text-s">10</text></view>
							 <view class="bottom-text-s">账号：11690131</view>
							 <view class="bottom-text-s">成交量：1</view>
						 </view>
					 </view>
				</view>
			 </view>
		</view>
		<view v-if="currentTab==1">
			<tui-no-data :fixed="false" imgUrl="/static/images/nodata/error.png">暂无数据</tui-no-data>
		</view>
		<view v-show="show" class="zf" @click="zfyc">
			<view class="zfyc-bottom" @click.stop="popupClose">
				<view class="zfyc-top">
					<view>请选择支付方式</view>
					<view>支付金额：<text class="tui-pay-amuont">￥{{totalPrice}}</text></view>
				</view>
				<radio-group name="radio">
					<label class="tui-pay-item istrue" @click="radio('1')">
						<image src="/static/images/mall/pay/icon_pay_weixin.png" class="tui-pay-logo"></image>
						<text>微信</text>
						<radio class="tui-radio" color="#ffad10" value="1" :checked="bianhao==='1'"/>
					</label>
					<label class="tui-pay-item istrue" @click="radio('3')" >
						<image src="/static/images/mall/pay/icon_pay_balance.png" class="tui-pay-logo"></image>
						<text>余额</text>
						<radio class="tui-radio" color="#ffad10" value="3" :checked="bianhao==='3'"/>
					</label>
				</radio-group>
				<view class="tui-btn-pay">
					<tui-button height="88rpx" type="warning" shape="circle" shadow @click="btnPay">去付款</tui-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					name: "待分发回馈宝"
				}, {
					name: "待分发贡献值"
				}],
				currentTab: 0,
				scrollTop:0,
				show: false,
				totalPrice: 0,
				bianhao: '',
				joingTrade: "",
				mobile: "",
				number: "",
				mobiles: "",
				numbers: "",
				Traderlist: '',
				membeslist: ""
			}
		},
		onShow() {
			this.membe()
		},
		methods:{
			change(e) {
				this.currentTab = e.index;
				this.pageIndex=1;
				this.bill_types=e.index+1;
			},
			recharge() {
				this.show = true
			},
			popupClose() {
				this.show = true
			},
			zfyc(){
				this.show = false
			},
			radio(e){
				console.log(e)
				this.bianhao=e;
			},
			btnPay(){
				let token = this.tui.getToken();
				let joiningTrader={
					token: token,
					pay_type: this.bianhao,
					pay_cost: 2,
					amount: this.totalPrice
				};
				
				let joingTrade=this.tui.request('join','post',joiningTrader,1000,1,'','payCost');
				Promise.resolve(joingTrade).then((value)=>{
				   if(value.code==10000){
					this.membe()
					this.show = false
				   }else{
				   	
				   }
				})
			},
			membe(){
				let token = this.tui.getToken();
				let membelist={
					token: token,
				};
				let user=this.tui.request('user','post',membelist,1000,1,'','userAccountInfo');
				Promise.resolve(user).then((value)=>{
				   if(value.code==10000){
					   this.membeslist = value.data;
				   }else{
				   	
				   }
				})
			},
			zr() {
				let token = this.tui.getToken();
				let Trader={
					token: token,
					number: this.number,
					account_type: 1,
					mobile: this.mobile,
					pay_password: 111111
				};
				
				let Traderlist=this.tui.request('join','post',Trader,1000,1,'','joinTraderTransfer');
				Promise.resolve(Traderlist).then((value)=>{
				   if(value.code==10000){
					   this.membeslist.stay_fqt = this.membeslist.stay_fqt - this.number
					   this.number = ''
				   }else{
				   	
				   }
				})
			},
			zrs(){
				let token = this.tui.getToken();
				let Trader={
					token: token,
					number: this.numbers,
					account_type: 2,
					mobile: this.mobiles,
					pay_password: 111111
				};
				let Traderlist=this.tui.request('join','post',Trader,1000,1,'','joinTraderTransfer');
				Promise.resolve(Traderlist).then((value)=>{
				   if(value.code==10000){
					   this.membeslist.stay_gxz = this.membeslist.stay_gxz - this.numbers
					   this.numbers = ''
				   }else{
				   	
				   }
				})	
				
			}
		}
	}
</script>

<style>
	.box{
		width: 100%;
		height: 100%;
		font-family: PingFang SC;
		background: rgb(245, 245, 245);
	}
	.meerchant-head{
		width: 100%;
		height: 166rpx;
		/* background: url(../../static/images/mall/my/merchantbj.png); */
		border-bottom-left-radius: 32rpx;
		border-bottom-right-radius: 32rpx;
	}
	.head-ts{
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.head-a{
		padding-top: 16rpx;
		padding-left: 32rpx;
	}
	.head-b{
		padding-top: 20rpx;
		padding-left: 48rpx;
	}
	.recharge{
		margin: 48rpx 0 40rpx 0;
		width: 100%;
		height: 316rpx;
	}
	.recharge-box{
		height: 316rpx;
		padding: 0 32rpx;
	}
	.recharge-concot{
		width: 100%;
		height: 316rpx;
		background: linear-gradient(180deg, #FF9E5C 0%, #FFB38E 100%);
		border-radius: 24rpx;
		text-align: center;
	}
	.recharge-ts{
		padding-top: 22rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 48rpx;
		color: #FFFFFF;
	}
	.recharge-tsa{
		width: 180rpx;
		height: 48rpx;
		display: flex;
		flex-wrap: nowrap;
		margin: 40rpx auto;
		font-size: 40rpx;
		font-weight: bold;
		line-height: 48rpx;
		color: #FFFFFF;
	}
	.recharge-button{
		width: 180rpx;
		height: 52rpx;
		background: rgba(255, 191, 152, 0.39);
		text-align: center;
		font-size: 26rpx;
		font-weight: bold;
		line-height: 52rpx;
		color: #FFFFFF;
		border-radius: 54rpx;
	}
	.transfer{
		width: 100%;
		height: 356rpx;
		display: flex;
		flex-wrap: nowrap;
		background: rgba(255, 255, 255, 0.39);
	}
	.transfer-box{
		width: 50%;
		height: 100%;
		text-align: center;
	}
	.border{
		border-right: 2rpx dashed #707070;
	}
	.transfer-nb{
		padding-top: 20rpx;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: #FF0000;
	}
	.transfer-hkb{
		padding-top: 8rpx;
		padding-bottom: 32rpx;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 38rpx;
		color: #333333;
	}
	.inpt-box{
		position: relative;
		margin-bottom: 24rpx;
		width: 100%;
		height: 40rpx;
	}
	.bottom{
		margin-bottom: 48rpx;
	}
	.inpt-ts{
		position: absolute;
		top: 4rpx;
		left: 38rpx;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
	}
	.inpt-input{
		position: absolute;
		top: 0;
		right: 32rpx;
		width: 90px;
		height: 100%;
		border: 1px solid #707070;
		border-radius: 10px;
		font-size: 24rpx;
	}
	.transfer-button{
		margin: 0 auto;
		width: 120rpx;
		height: 40rpx;
		background: linear-gradient(180deg, #FFA539 0%, #FB672F 55%, #FA5E2E 100%);
		box-shadow: 0px 8rpx 12rpx #ED371A;
		border-radius: 54rpx;
		text-align: center;
	}
	.button-ts{
		font-size: 18rpx;
		transform: scale(0.8);
		font-weight: bold;
		line-height: 40rpx;
		color: #FFFFFF;
	}
	.coupon-list{
		position: relative;
		margin-top: 40rpx;
		box-sizing: border-box;
		
	}
	.tui-tabs-fixed{
		position:relative !important;
		top:auto !important;
	}
	.coupon-box{
		width: 100%;
	}
	.list{
		margin-top: 32rpx;
		width: 100%;
		height: 252rpx;
		background: rgb(255, 255, 255);
		border-radius: 8rpx;
	}
	.list-top{
		width: 100%;
		height: 80rpx;
		border-bottom: 2rpx solid rgb(200, 200, 200);
	}
	.list-top-ts{
		padding-left: 60rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 80rpx;
		color: #BDC4CE;
	}
	.list-bottom{
		width: 100%;
		height: 152rpx;
		display: flex;
	}
	.bottom-tp{
		margin-top: 20rpx;
		width: 200rpx;
		height: 120rpx;
		text-align: center;
		border-right: 2rpx solid #F3F3F3;
	}
	.bottom-tx{
		margin: 0 auto;
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		background: #707070;
	}
	.bottom-name{
		margin-top: 6rpx;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 38rpx;
		color: #333333;
	}
	.bottom-text{
		margin-top: 20rpx;
		padding-left: 20rpx;
		width: calc(100% - 200rpx);
		height: 152rpx;
	}
	.bottom-text-s{
		margin-bottom: 12rpx;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		color: #333333;
	}
	.text-s{
		color: #F0203D;
	}
	
	.zf{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(100,100,100,0.6);
		z-index: 999;
	}
	.zfyc-bottom{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 40%;
		background: #FFFFFF;
		border-top-left-radius: 5%;
		border-top-right-radius: 5%;
	}
	.zfyc-top{
		margin: 20rpx 0;
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}
	.tui-pay-amuont{
		color: #ffad10;
		font-weight: 500;
		font-size: 34rpx;
	}
	.tui-pay-logo{
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}
	.tui-radio {
		border-radius: 50%;
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
	}
	.tui-pay-item{
		margin: 20rpx 0;
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}
	.tui-btn-pay{
		width: 100%;
		padding: 68rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
	}
</style>
